<script lang="ts" setup>
import { useUserStore } from '@/common/stores'
import router from '@/router'
import {
  UserOutlined,
  FieldTimeOutlined,
  HeartOutlined,
  BellOutlined,
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { RouterLink } from 'vue-router'
import { usePersonalData } from '@/common/stores/modules/personal-data'

const modalText = ref<string>('你确认要退出么')
const personal = usePersonalData().personalData
const open = ref<boolean>(false)
const confirmLoading = ref<boolean>(false)
const userStore = useUserStore()
// 自定义按钮间距
const size = ref(2)
//
const handleLoginButtonClick = () => {
  // 判断是否登录
  if (userStore.userInfo) {
    return
  } else {
    router.push('/login')
  }
}
console.log(userStore, 'login')

const showModal = () => {
  open.value = true
}

// 模拟退出登录
const handleOk = () => {
  modalText.value = '正在退出中...'
  confirmLoading.value = true
  setTimeout(() => {
    open.value = false
    confirmLoading.value = false
    userStore.clearUserInfo()  // 清空用户信息
    router.push('/login')  // 跳转登录页面
    message.success('退出成功！')
  }, 1000)
}

// 菜单列表
const List = [
  {
    path: '/my',
    name: '个人中心',
    icon: UserOutlined,
  },
  {
    path: 'my',
    name: '浏览记录',
    icon: FieldTimeOutlined,
  },
  {
    path: 'my',
    name: '我的收藏',
    icon: HeartOutlined,
  },
  {
    path: '/notice',
    name: '系统通知',
    icon: BellOutlined,
  },
]
</script>

<template>
  <div class="header-login">
    <!-- 已登录 -->
    <div class="header-login-already-logged-in" v-if="userStore.userInfo">
      <!-- 下拉菜单 -->
      <a-dropdown>
        <div class="ant-dropdown-link">
          <a-avatar :size="40" src="src/assets/lijie.jpg">
            <template #icon>
              <UserOutlined />
            </template>
          </a-avatar>
          <span class="header-login-already-logged-in-text">
            {{ personal.nickname ? personal.nickname : userStore.userInfo?.user }}
          </span>
        </div>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <div class="ant-dropdown-link">
                <div>
                  <a-avatar :size="32" src="src/assets/lijie.jpg">
                    <template #icon>
                      <UserOutlined />
                    </template>
                  </a-avatar>
                </div>

                <div class="pop-up">
                  <span class="header-login-already-logged-in-text1">
                    {{
                      personal.nickname ? personal.nickname : userStore.userInfo?.user
                    }}
                  </span>
                  <span class="motto">{{
                    personal.intro ? personal.intro : '这人太懒了,什么都没写~~'
                  }}</span>
                </div>
              </div>
            </a-menu-item>
            <a-menu-item v-for="(item, index) in List" :key="index">
              <template #icon>
                <!-- 通过动态组件渲染对应的图标 -->
                <component :is="item.icon" class="list-icon" />
              </template>
              <!-- 跳转路由 -->
              <RouterLink
                :to="{ path: item.path, query: { tab: item.name } }"
                class="header-login-already-logged-in-spacing-change"
              >
                {{ item.name }}
              </RouterLink>
            </a-menu-item>
            <!-- 退出登录 -->
            <a-menu-item class="log-out-menu-item">
              <a-button
                type="link"
                @click="showModal"
                :style="{ width: '200px', textAlign: 'center' }"
                >退出登录</a-button
              >
            </a-menu-item>
            <!-- 退出登录 弹框 -->
            <a-modal
              v-model:open="open"
              title="通知"
              :confirm-loading="confirmLoading"
              @ok="handleOk"
              okText="确定"
              cancelText="取消"
            >
              <p>{{ modalText }}</p>
            </a-modal>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <!-- 未登录 -->
    <div class="header-login-not-logged-in" v-else>
      <a-space
        class="header-login-not-logged-in-spacing"
        @click="handleLoginButtonClick()"
        :size="size"
      >
        <a-button class="header-login-not-logged-in-spacing-change" type="link"
          >登录</a-button
        >
        <span>|</span>
        <a-button class="header-login-not-logged-in-spacing-change" type="link"
          >注册</a-button
        >
      </a-space>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header-login {
  cursor: pointer;

  // 已登录样式
  &-already-logged-in {
    display: flex;
    align-items: center;

    &-text {
      display: inline-block; /* 或者可以使用 block */
      width: 8ch; /* 设置固定的宽度，可以根据需要调整 */
      margin: 1rem 0.5rem;
      overflow: hidden; /* 隐藏超出部分 */
      font-size: 0.9375rem;
      color: $educ-color-white;
      text-overflow: ellipsis; /* 超出部分显示省略号 */
      white-space: nowrap; /* 禁止换行 */
    }

    &-spacing-change {
      margin-left: 0.3rem;
      line-height: 2.25rem;

      a {
        margin-left: 0.5rem;
      }
    }
  }

  // 未登录样式
  &-not-logged-in {
    color: $educ-color-white;

    &-spacing {
      &-change {
        font-size: 0.9375rem;
        color: $educ-color-white;
      }
    }
  }
}

.pop-up {
  display: flex;
  flex-direction: column !important;
  align-items: flex-start;
  justify-content: center;
  padding: 0 10px;

  .header-login-already-logged-in-text1 {
    padding: 0;
    margin: 0;
    color: #000;
  }

  .motto {
    font-size: 12px;
    color: #999;
  }
}

.list-icon {
  font-size: 1.25rem !important;
  color: #555;
}

.ant-dropdown-link {
  display: flex;
  align-items: center;
}

@media screen and (width <=480px) {
  .header-login-already-logged-in-text {
    display: none;
  }
}
</style>
